<%@page import="isquirrel.UserManager"%>
<%@page import="isquirrel.beans.User"%>
<%@page import="isquirrel.util.Utilities"%>
<%@page import="isquirrel.util.HibernateUtil"%>
<%@page import="isquirrel.beans.Interest"%>
<%@page import="java.util.Set" %>
<%@page import="java.util.TreeSet" %>
<%@page import="java.util.Collections" %>


<div style="margin-bottom:12px;font-weight:bold; color:#727272">What are you interested in?</div>
<div style="margin-bottom: 10px; padding-bottom: 15px; border-bottom: 1px solid #ccc">

	<p>
		<input class="biginput" type="text"  id="interest" name="interest"/>	
	</p>
	<input id="interestbtn" type="button" class="mediumbtn"  onClick="ajax();" value="Add interest"/>
	<p id="interest_spinner" style="display:none;"><img src="/<%=request.getRequestURI().split("/")[1]%>/images/profilespinner.gif"  alt="spinner" />&nbsp;Please be patient while we retrieve information about this interest</p>
</div>
<div style=" font-weight:bold; color:#727272">Your interests.</div>
<div id="interestlist">
<%  
	HibernateUtil.beginTransaction();
	User u = UserManager.getUser((String)session.getAttribute("user")); 
	Set<Interest> interests = u.getInterests();
	TreeSet<Interest> sortedInterests = new TreeSet<Interest>(interests);
	for (Interest i : sortedInterests) {
		%><div class="interest"><div style="margin-bottom:2px"><%out.print(i.getLabel());%></div><div style="font-size:0.60em; color:#636363"><%out.print(i.getDescription()); /*this might return null*/%></div></div>
	<%	}
		HibernateUtil.commit();
	%>
</div>	
<script type="text/javascript">

	Event.observe("interest", "keypress", function(e){

		if (e.keyCode === Event.KEY_RETURN){
			ajax();
			Event.stop(e);
		} 
		
	});
	
	ajax = function(){
			if ($$("div.error")[0]){
				$$("div.error")[0].remove();
			}
			if ($$("div.good")[0]){
				$$("div.good")[0].remove();
			}
			
			$("interest").disable();
			$("interestbtn").value="Adding..";
			$("interestbtn").disable();
			new Ajax.Request("/<%=request.getRequestURI().split("/")[1]%>/servlet/AddInterest",{
				method: "post",
				parameters: {interest: $("interest").value},
				onSuccess: function(transport){
					var response = transport.responseText.evalJSON(true);
					if (response.error === 1 ){
						$("interest").setStyle({backgroundColor: "#FDE6E6"});
						$("interest").insert({ after: "<div class='error'>"+response.msg+"</div>"});
					}
					else{
						$("interestlist").highlight();
						var ivalue = $("interest").value;
						var title = new Element("div").setStyle({marginBottom: "2px"}).update(ivalue);
						var desc = new Element("div").writeAttribute({id: ivalue+"_desc"})
													 .setStyle({fontSize: "0.60em", color: "#636363"})
													 .update("Loading description...");
						 
						var interest = new Element("div").addClassName("interest").insert({top: title, bottom: desc});
						$("interestlist").insert({ top: interest});
						$("interest").insert({ after: "<div class='good'>"+response.msg+"</div>"});

						new Ajax.Request("/<%=request.getRequestURI().split("/")[1]%>/servlet/GetDesc",{
								method: "get",
								parameters: {subject: $("interest").value, type: 2},
								onSuccess: function(transport){
									$(ivalue+"_desc").update(transport.responseText);
								}
						});
								
					}
					$("interest").enable();
					$("interestbtn").value="Add interest";
					$("interestbtn").enable();
				}
			});
	};
/*
new Fudel.Form('interestsform', { 
	enableOnOK: true,
	onSubmit: function() { $('interest_spinner').show(); },
	onOK : function() {
		$("interestlist").insert({bottom: new Element('div').addClassName('interest').update($('interest').value)});
		$("interestlist").highlight();
		$('interest').enable();
		$('interest').focus();
		$('interest_spinner').hide();
	},
	onError : function(obj) {
		alert(obj.ERROR);
		$('interest').enable()
		$('interest_spinner').hide();
		//$('interest').focus();
	}, 
	onValidationError : function() {
		$('interest_spinner').hide();
	}
});*/

Event.observe('interest', "focus", function(e){
	
	this.setStyle({backgroundColor: "#E3FCDC"});
		
});

Event.observe('interest', "blur", function(e){

	this.setStyle({backgroundColor: "white"});

});	

</script>
